<script setup>
import UNavbar from "../../uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import DatetimePicker from "@/uni_modules/uview-plus/components/u-datetime-picker/u-datetime-picker.vue";
import {ref} from 'vue';
import {getbumen, yeji} from "../../request/api";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {getMonthRangeTimestamps, timestampToDate} from "../../utils";

const showDatetime = ref(false);//年月选择器
const tagList = {
  '下单':{
    name:'脆',
    title:'下单',
    background:'rgba(238, 238, 238, 1)'
  },
  '生产中':{
    name:'花',
    title:'生产中',
    background:'rgba(255, 0, 0, 1)'
  },
  '生产完毕':{
    name:'须',
    title:'生产完毕',
    background:'rgba(255, 255, 0, 1)'
  },
  '发货完毕':{
    name:'头',
    title:'发货完毕',
    background:'rgba(0, 176, 80, 1)'
  },
  '结账完毕':{
    name:'',
    title:'结账完毕',
    background:'rgba(13, 13, 13, 1)'
  },
};//标签列表
const departmentList = ref([]);//部门列表
const payload = ref({
  id:'',
  departmentName:'',
  start_time:'',
  end_time:'',
  startTime:'',
  endTime:'',
  month:''
})
let date = new Date();
const memberList = ref({});//人员
const navigateTo = (url) => {
  uni.navigateTo({
    url
  })
}
onShow(()=>{
  // #ifdef H5
  uni.hideTabBar({});
  setTimeout(()=>{

  },500)

  // #endif
  initDate(date.getFullYear(),date.getMonth()+1);

})

onLoad(()=>{

});

const initDate = (year,month) => {
  payload.value.month =month;
  let {start,end} = getMonthRangeTimestamps(year,month);
  payload.value.start_time = start;
  payload.value.end_time = end;
  payload.value.startTime = timestampToDate(start);
  payload.value.endTime = timestampToDate(end);
  getDepartmentList();

}
/**
 * 获取部门列表
 */
const getDepartmentList = () => {
  getbumen({}).then(res=>{
    departmentList.value = res.data;
    payload.value.id = res.data[0].id;
    payload.value.departmentName = res.data[0].name;
    getOutstandingAchievement();

  })
}
/**
 * 选择器变化
 * @param value 选中的索引
 * @param field 属性
 */
const pickerChange = ({detail:{value}},field) => {
  switch (field) {
    case 'id':
      let item = departmentList.value[value];
      payload.value.id = item.id;
      payload.value.departmentName = item.name;
      getOutstandingAchievement();
  }
}
/**
 * 获取业绩看板
 */
const getOutstandingAchievement = () => {
  let data = {};
  if (payload.value.start_time){
    data.start_time = payload.value.start_time;
    data.end_time = payload.value.end_time;
  }
  if (payload.value.departmentName){
    data.id = payload.value.id;
  }
  yeji({
      ...data
  }).then(res=>{
   /* let arr = {
      '2-1':[//订单数
          [//某天
            {
              d,
              status
            }
          ]
      ]
    }*/
    res.data.forEach(item=>{
      memberList.value[item[0].number] = [];
      groupById(item).forEach(item2=>{
        memberList.value[item[0].number].push(item2.items);
      })
    })
    console.log(memberList.value);
    for (const valueElement of memberList.value) {
      console.log(valueElement)
    }
  })
}
function groupById(data) {
  let groupedData = {};

  data.forEach(item => {
    if (!groupedData[item.id]) {
      groupedData[item.id] = [];
    }
    item.date = Number(item.date)
    if (item.status==='财务复核完毕') item.status = '结账完毕'
    groupedData[item.id].push(item);
  });

  // 将对象转换为数组形式
  let resultArray = Object.keys(groupedData).map(key => ({
    id: parseInt(key), // 转换键为整数
    items: groupedData[key]
  }));
  return resultArray;
}
function groupByDate(data) {
  let groupedData = {};

  data.forEach(item => {
    if (!groupedData[item.date]) {
      groupedData[item.date] = [];
    }
    groupedData[item.date].push(item);
  });

  // 将对象转换为数组形式
  let resultArray = Object.keys(groupedData).map(key => ({
    date: key,
    items: groupedData[key]
  }));

  return resultArray;
}
const dateChange = ({detail:{value}}) => {
  let [year,month]= value.split('-')
  initDate(year,month);

}
const scrollTop = ref(0);
</script>

<template>
  <datetime-picker :show="showDatetime" mode="year-month"></datetime-picker>
  <view class="index-page">
    <u-navbar placeholder title="业绩看板" left-icon=""></u-navbar>
    <view class="sift">
      <picker @change="pickerChange($event,'id')" :range="departmentList" range-key="name">
        <view class="department">
          <text>{{ payload.departmentName || '未选择' }}</text>
          <image src="/static/down.png"></image>
        </view>
      </picker>
      <view class="date-range">
        <picker :end="date" @change="dateChange" mode="date" fields="month">
          <view class="month">
            <text>{{payload.month}}月</text>
            <image src="/static/down.png"></image>
          </view>
        </picker>
        <view class="date">
          {{payload.startTime}}-{{payload.endTime}}
        </view>
      </view>
    </view>

    <view class="tag">
      <view class="tag-item" v-for="(item,key) of tagList" :key="key">
        <text :style="{
          background:item.background
        }">{{item.name}}</text>
        <text>{{item.title}}</text>
      </view>
      </view>
    <view class="content">
      <view class="month">
        <text>{{payload.month}}月</text>
        <scroll-view :scroll-top="scrollTop" scroll-y class="scroll-y">
          <view class="order-code">
            <view :style="{
              height:item.length*72+'rpx'
            }" v-for="(item,key) of memberList" :key="key">{{key}}</view>
          </view>
        </scroll-view>
      </view>
      <scroll-view @scroll="e=>scrollTop = e.detail.scrollTop"  :scroll-x="true" scroll-y class="scroll-x">
        <view class="data">
          <view class="day">
            <text v-for="(item,index) of 31" :key="index">{{item}}</text>
          </view>
          <view  v-for="(item,key) of memberList" :key="key" class="member-data">
            <view  v-for="(item2,index2) of item" :key="index2" class="order-item">
              <view  v-for="(day) of 31" :key="day">
<!--             v-for="(item3,index3) of item2" :key="index3"    -->
                <text @click="day===item2[0].date && navigateTo(`/pages/order-detail/order-detail?id=${item2[0].id}`)" :style="{
                  background:(day===item2[0].date )&& tagList[item2[0].status].background,
                  color:item2[0].status==='结账完毕'?'#fff':'#333'
                }" >{{day===item2[0].date?item2[0].name.charAt(0):''}}</text>
              </view>

            </view>
          </view>

        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.index-page {
  height: 100vh;
  width: 100vw;
  padding: 0 20rpx 20rpx 20rpx;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .content{
    flex: 1;
    width: 100%;
    height: 0;
    display: flex;
    border: 1rpx solid #eee;
    margin-top: 25rpx;
    .scroll-x{
      flex: 1;
      width: 0;

      height: 100%;
      .data{
        display: flex;
        flex-direction: column;
        .order-item{
          display: flex;
          view{
            width: 92rpx;
            height: 72rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            font-size: 28rpx;
            flex-shrink: 0;
            color: #222222;
            border-bottom: 1rpx solid #f2f2f2;
            border-right: 1rpx solid #f2f2f2;
            text{
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
              height: 100%;
            }
          }
        }
        .day{
          display: flex;
          align-items: center;
          >text{
            width: 92rpx;
            border-right: 1rpx solid #eee;
            height: 57rpx;
            background: #F8F8F8;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            font-size: 28rpx;
            color: #999999;
            line-height: 25rpx;
          }
        }
      }

    }
    .month{
      flex-shrink: 0;
      width: 156rpx;
      height: 100%;
      background: #FFFFFF;
      box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(33,33,33,0.1);
      display: flex;
      flex-direction: column;

      .order-code{
        width: 100%;
        display: flex;
        flex-direction: column;
        >view{
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom: 1rpx solid #eee;
          font-weight: 400;
          font-size: 26rpx;
          color: #666666;
          line-height: 25rpx;
          &:last-child{
            border-bottom: unset;
          }
        }
      }
      >text{
        width: 100%;
        height: 57rpx;
        background: #F8F8F8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        line-height: 25rpx;
      }
    }
  }
  .tag{
    width: 100%;
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tag-item{
      display: flex;
      align-items: center;
      text:last-child{
        font-weight: 400;
        font-size: 22rpx;
        color: #222222;
      }
      text:first-child{
        margin-right: 8rpx;
        font-weight: 400;
        font-size: 20rpx;
        color: #222222;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 37rpx;
        height: 27rpx;
      }
    }
  }
  .sift {
    width: 100%;
    padding: 34rpx 0 0 0;
    justify-content: space-between;
    align-items: center;
    height: 55rpx;
    column-gap: 30rpx;
    display: flex;

    .date-range {
      height: 55rpx;
      flex-grow: 1;
      background: #F0F3FA;
      border-radius: 8rpx;
      display: flex;

      .date {
        flex-grow: 1;
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .month {
        height: 50rpx;
        width: 165rpx;
        padding-right: 15rpx;
        display: flex;
        align-items: center;
        position: relative;

        &:after {
          content: "";
          width: 2rpx;
          height: 42rpx;
          position: absolute;
          background: #E0E9FB;
          right: 0;
          border-radius: 1rpx;

        }

        text {
          font-weight: 500;
          margin-right: 18rpx;
          font-size: 26rpx;
          color: #333333;
          left: 50%;
          transform: translateX(-50%);
          position: absolute;
        }

        image {
          width: 20rpx;
          margin-left: auto;
          height: 20rpx;
        }
      }
    }

    .department {
      width: 180rpx;
      height: 55rpx;
      background: #F0F3FA;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      text {
        font-weight: 500;
        margin-right: 18rpx;
        font-size: 26rpx;
        color: #333333;
        line-height: 72rpx;
      }

      image {
        width: 20rpx;
        height: 20rpx;
      }
    }

  }

}
</style>
